<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Analyser</title>
    <script>
        (function detectSupportablity() {
            if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
                alert('Your browser not support the application, try the latest verion of Mozila FireFox');
            }
        })();
    </script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <style>
        #main {
            display: grid;
            grid-template-columns: repeat(8, 100px);
            grid-template-rows: repeat(4, 100px);
            background-color: #ddd;
            width: 800px;
            height: 400px;
            margin: auto;
        }

        .free {
            opacity: 60%;
        }

        @keyframes tile_left {
            0% {}

            100% {
                opacity: 0%;
                transform: translate(-100px, 0px);
            }
        }

        .belongs-to-0 {
            background-color: cadetblue !important;
            border: 10px solid #ddd;
            font-size: 20px;
            text-align: center;
            display: flex;
            align-items: center;

            /* animation: tile_left 2s;
            animation-fill-mode: forwards;
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */
        }

        .belongs-to-1 {
            background-color: blueviolet !important;
            border: 10px solid #ddd;
            font-size: 20px;
            text-align: center;
            display: flex;
            align-items: center;

            /* animation: tile_show 2s;
            animation-fill-mode: forwards;
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */
        }

        div p {
            margin: auto;
            text-align: center;
        }

        .c_button_upload {
            margin: auto;
            margin-top: 30px;
            text-align: center;
        }
    </style>
    <div id="main">
        <div class="belongs-to-0" id="tile00" style="grid-column: 1;grid-row: 1;"></div>
        <div class="belongs-to-0" id="tile01" style="grid-column: 1;grid-row: 2;"></div>
        <div class="belongs-to-0" id="tile02" style="grid-column: 1;grid-row: 3;"></div>
        <div class="belongs-to-0" id="tile03" style="grid-column: 1;grid-row: 4;"></div>
        <div class="belongs-to-0" id="tile10" style="grid-column: 2;grid-row: 1;"></div>
        <div class="belongs-to-0" id="tile11" style="grid-column: 2;grid-row: 2;"></div>
        <div class="belongs-to-0" id="tile12" style="grid-column: 2;grid-row: 3;"></div>
        <div class="belongs-to-0" id="tile13" style="grid-column: 2;grid-row: 4;"></div>
        <div class="belongs-to-0" id="tile20" style="grid-column: 3;grid-row: 1;"></div>
        <div class="belongs-to-0" id="tile21" style="grid-column: 3;grid-row: 2;"></div>
        <div class="belongs-to-0" id="tile22" style="grid-column: 3;grid-row: 3;"></div>
        <div class="belongs-to-0" id="tile23" style="grid-column: 3;grid-row: 4;"></div>
        <div class="belongs-to-0" id="tile30" style="grid-column: 4;grid-row: 1;"></div>
        <div class="belongs-to-0" id="tile31" style="grid-column: 4;grid-row: 2;"></div>
        <div class="belongs-to-0" id="tile32" style="grid-column: 4;grid-row: 3;"></div>
        <div class="belongs-to-0" id="tile33" style="grid-column: 4;grid-row: 4;"></div>
        <div class="belongs-to-1" id="tile40" style="grid-column: 5;grid-row: 1;"></div>
        <div class="belongs-to-1" id="tile41" style="grid-column: 5;grid-row: 2;"></div>
        <div class="belongs-to-1" id="tile42" style="grid-column: 5;grid-row: 3;"></div>
        <div class="belongs-to-1" id="tile43" style="grid-column: 5;grid-row: 4;"></div>
        <div class="belongs-to-1" id="tile50" style="grid-column: 6;grid-row: 1;"></div>
        <div class="belongs-to-1" id="tile51" style="grid-column: 6;grid-row: 2;"></div>
        <div class="belongs-to-1" id="tile52" style="grid-column: 6;grid-row: 3;"></div>
        <div class="belongs-to-1" id="tile53" style="grid-column: 6;grid-row: 4;"></div>
        <div class="belongs-to-1" id="tile60" style="grid-column: 7;grid-row: 1;"></div>
        <div class="belongs-to-1" id="tile61" style="grid-column: 7;grid-row: 2;"></div>
        <div class="belongs-to-1" id="tile62" style="grid-column: 7;grid-row: 3;"></div>
        <div class="belongs-to-1" id="tile63" style="grid-column: 7;grid-row: 4;"></div>
        <div class="belongs-to-1" id="tile70" style="grid-column: 8;grid-row: 1;"></div>
        <div class="belongs-to-1" id="tile71" style="grid-column: 8;grid-row: 2;"></div>
        <div class="belongs-to-1" id="tile72" style="grid-column: 8;grid-row: 3;"></div>
        <div class="belongs-to-1" id="tile73" style="grid-column: 8;grid-row: 4;"></div>
    </div>
    <div id="comment"> </div>
    <input type="file" name="record" id="i_input_file" autocomplete='off'
        style="visibility: hidden;width: 0;height: 0;display: block;">
    <div class="c_button_upload" id="i_button_upload" onclick="$('#i_input_file').click();">Click me to upload record
    </div>
    <script>
        var record = null;
        var log = null;
        var boards = [];
        var current = 0;
        function on_upload(event) {
            var file = event.target.files[0];
            var reader = new FileReader();
            reader.readAsText(file, "UTF-8");
            reader.onload = function (e) {
                record = e.target.result.replace(/\r/g, '');
                process_text();
                render(current = 0);
            };
        }

        function process_text() {
            log = record.split("&");
            var comment = [];
            boards = [];
            log.forEach(function (element, index) {
                if (index == 0) { return; }
                if (element[0] == "p") {
                    boards.push({
                        "board": element.split(":\n")[1],
                        "comment": comment
                    });
                    comment = [];
                    return;
                }
                if (element[0] == "d") {
                    comment.push(element.split(":")[1]);
                    return;
                }
            });
        }
        function render(seq) {
            var board = boards[seq].board;
            var comment = boards[seq].comment;
            console.log(seq);
            console.log(board);
            $("#comment").empty();
            comment.forEach(function (value) {
                $("#comment").append("<p>" + value + "</p>");
            });
            board.split("\n").forEach((value, index) => {
                if (index >= 4) { return; }
                value.split(" ").forEach((val, ind) => {
                    if (ind >= 8) { return; }
                    var style = "belongs-to-0";
                    if (val[0] == "-") {
                        style = "belongs-to-1";
                    }
                    var v = "<p></p>";
                    if (Number(val.slice(1)) != 0) {
                        v = "<p>" + String(Math.pow(2, Number(val.slice(1)))) + "</p>";
                    } else {
                        style += " free";
                    }
                    var x = ind;
                    var y = index;
                    var id = "tile" + String(x) + String(y);
                    try {
                        document.getElementById(id).innerHTML = v;
                        document.getElementById(id).className = style;
                    } catch (error) {
                        console.log(x, y, id, val, value, current, boards[current]);
                    }
                });
            });
        }
        function back() {
            if (current > 0) {
                current -= 1;
                render(current);
            }
        }
        function go() {
            if (current < boards.length - 1) {
                current += 1;
                render(current);
            }
        }
        function key_listener(event) {
            var e = e || window.event;
            console.log(e.key);
            if (e.key == "[") {
                back();
                return;
            }
            if (e.key == "]") {
                go();
                return;
            }
        }
        $("#i_input_file").change(on_upload);
        document.querySelector("body").onkeydown = key_listener;
    </script>
</body>
